<template>
    <div>
        <el-button type="text" @click="dialogVisible = true">添加菜品</el-button>
        <div style="width:800px">
            <el-dialog
              title="添加菜品"
              :visible.sync="dialogVisible"
              width="70%"
              :before-close="handleClose">
              <span>
                <el-transfer v-model="value" :data="data"></el-transfer>
              </span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
              </span>
            </el-dialog>
        </div>







    </div>


</template>

<script>
  export default {
    data() {
      return{
         dialogVisible: false,
         data:[{"key":1,'lable':'菜品1'},{"key":2,'lable':'菜品2'},{"key":3,'lable':'菜品3'}],
         value:[]
      } 
    },
    methods:{
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
    
  };
</script>

<style scoped>
element.style{
  margin-top:15vh;
  width:45%;
}
.el-transfer{
  font-size:14px;
  width:1000px;
}

</style>